<template>
  <div class="page">
    <div class="result-page">
      <div class="card-box">
        <div class="card-item">
          <div class="card-body">
            <van-steps
              direction="vertical"
              :active="stepActive"
              inactive-color="#c7cad8"
              active-icon="manager"
              inactive-icon="wap-home"
              finish-icon="checked"
            >
              <van-step v-for="(item, index) in stepList" :key="index">
                <div>
                  <span class="step-title">{{ item.title }}</span>
                  <span class="finish-time" v-show="item.finishTime">{{ item.finishTime }}</span>
                </div>
                <p class="setp-desc">{{ item.desc }}</p>
              </van-step>
            </van-steps>
          </div>
        </div>
      </div>

      <div class="btn-group">
        <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
        <van-button type="button" class="cus-btn btn-primary" @click="goToList">查看申请记录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default {
  components: {},
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      stepList: [
        { title: '开工申请提交成功', desc: '您已成功提交开工申请，请等待相关部门现场审查，确定建房位置。', finishTime: '2021-12-03' },
        { title: '等待审批通知', desc: '审批通过后，可以开始建房啦', finishTime: '' },
        { title: '申请竣工', desc: '住宅建成后，在本平台首页申请竣工', finishTime: '' },
      ],
      stepActive: route.params.stepActive || 1,
    })
    if (route.params.stepList) {
      state.stepList = JSON.parse(route.params.stepList)
    }

    onMounted(async () => {})

    const handleBack = () => {
      router.push({ path: '/home' })
    }

    const goToList = () => {
      router.push({ path: '/record-apply/record-list', query: { applyType: route.params.applyType } })
    }

    return {
      ...toRefs(state),
      handleBack,
      goToList,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .result-page {
    padding-top: 12px;
    .van-step__circle-container {
      font-size: 20px;
    }
    .step-title {
      font-size: 16px;
      font-weight: bold;
    }
    .finish-time {
      font-size: 13px;
      font-weight: 400;
      color: #9297ae;
      float: right;
    }
    .setp-desc {
      font-size: 14px;
      font-weight: 400;
    }
    .btn-group {
      padding: 20px 0;
      margin: 50px 0 20px;
      position: fixed;
      bottom: 0;
      .cus-btn {
        width: 167px;
        margin-right: 10px;
        &:nth-last-child(0) {
          margin: 0;
        }
      }
    }
  }
}
</style>
